<template>
  <el-skeleton :rows="5" animated :loading="loading">
    <div class="w-72">
      <p class="py-5 text-xl">{{ $t("登录用户名") }}</p>
      <el-input
        v-model="form.name"
        :placeholder="$t('请创建子账号用户名')"
        clearable
        size="large"
        :disabled="route.query.type == 'edit'"
      />
      <div v-if="route.query.type == 'add'">
        <p class="py-5 text-xl">{{ $t("请输入子账号密码") }}</p>
        <el-input
          v-model="form.password"
          :placeholder="$t('默认密码') + ': 111111'"
          clearable
          size="large"
          :disabled="route.query.type == 'edit'"
        />
      </div>
      <!-- <p class="mt-3 text-sm text-gray-400" v-if="route.query.type == 'add'">
        {{$t('默认密码')}}: 1234567890
      </p> -->
    </div>
    <p class="py-5 text-xl">{{ $t("选择身份") }}</p>
    <!-- 权限选择 -->
    <el-checkbox-group size="large" v-model="form.group_id">
      <el-checkbox
        v-for="item in role_list"
        :key="item.id"
        :label="item.id"
        class="mx-5 w-60"
      >
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
    <el-button
      type="primary"
      :icon="SuccessFilled"
      size="large"
      class="w-48 mt-5"
      @click="handleSumbit"
      >{{ $t("提交") }}</el-button
    >
  </el-skeleton>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  CreateAccount,
  accountInfoApi,
  accountRoleListApi,
  accountUpdateApi,
} from "@/api/merchant/index";
import { ElMessage } from "element-plus";
import { SuccessFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const form = reactive({
  name: "",
  password: 111111,
  group_id: [],
});
const role_list = ref([]);

onMounted(async () => {
  if (route.query.uid) {
    try {
      loading.value = true;
      const res = await accountInfoApi({ uid: route.query.uid });
      // console.log(res);

      const group_id = [];

      if (res.role_list.length) {
        for (let i = 0; i < res.role_list.length; i++) {
          if (res.role_list[i].selected == 1) {
            group_id.push(res.role_list[i].id);
          }
        }
      }

      Object.assign(form, { name: res.name, group_id: group_id });
      // console.log(form);
      loading.value = false;
    } catch (e) {
      loading.value = false;
    }
  }
});

const handleSumbit = async () => {
  try {
    if (!form.name) {
      return ElMessage({
        message: t("请输入用户名"),
        type: "error",
        grouping: true,
      });
    }
    if (!form.group_id.length) {
      return ElMessage({
        message: t("请选择一个身份"),
        type: "error",
        grouping: true,
      });
    }
    if (route.query.type == "add") {
      const parameter = {
        name: form.name,
        password: form.password,
        group_id: form.group_id.join(","),
      };
      // console.log(parameter);
      //    发送请求参数
      const res = await CreateAccount(parameter);
      ElMessage({
        message: t("创建子账号成功"),
        type: "success",
        grouping: true,
      });
    }
    if (route.query.type == "edit") {
      const parameter = {
        uid: route.query.uid,
        group_id: form.group_id.join(","),
      };
      // console.log(parameter);
      //    发送请求参数
      const res = await accountUpdateApi(parameter);
      ElMessage({
        message: t("编辑子账号成功"),
        type: "success",
        grouping: true,
      });
    }

    router.replace(`/merchantSettings/subAccount`);
  } catch (error) {}
};
const getRoleListData = async () => {
  try {
    loading.value = true;
    const res = await accountRoleListApi();
    // console.log(res);
    role_list.value = res;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
Promise.all([getRoleListData()]);
</script>
